<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>好客租房项目 | Megasu的笔记</title>
    <meta name="generator" content="VuePress 1.5.4">
    <link rel="icon" href="/heima2020/favicon.ico">
    <meta name="description" content="Megasu的笔记整理">
    <meta name="author" content="Megasu">
    <meta name="Keywords" content="学习网站,前端,分享">
    <link rel="preload" href="/heima2020/assets/css/0.styles.aa663799.css" as="style"><link rel="preload" href="/heima2020/assets/js/app.e2adc9d2.js" as="script"><link rel="preload" href="/heima2020/assets/js/2.7389c9d3.js" as="script"><link rel="preload" href="/heima2020/assets/js/4.586af112.js" as="script"><link rel="prefetch" href="/heima2020/assets/js/10.8b750e5f.js"><link rel="prefetch" href="/heima2020/assets/js/11.9224f975.js"><link rel="prefetch" href="/heima2020/assets/js/12.3ea117b6.js"><link rel="prefetch" href="/heima2020/assets/js/13.7524b74f.js"><link rel="prefetch" href="/heima2020/assets/js/14.cee0fcf8.js"><link rel="prefetch" href="/heima2020/assets/js/15.7a4a27f7.js"><link rel="prefetch" href="/heima2020/assets/js/16.947d882b.js"><link rel="prefetch" href="/heima2020/assets/js/17.79d3becb.js"><link rel="prefetch" href="/heima2020/assets/js/18.48208e3a.js"><link rel="prefetch" href="/heima2020/assets/js/19.3d0c49ef.js"><link rel="prefetch" href="/heima2020/assets/js/20.1f6114c8.js"><link rel="prefetch" href="/heima2020/assets/js/21.85e67b4a.js"><link rel="prefetch" href="/heima2020/assets/js/22.ce482f4d.js"><link rel="prefetch" href="/heima2020/assets/js/23.a150bd35.js"><link rel="prefetch" href="/heima2020/assets/js/24.8cd80d5d.js"><link rel="prefetch" href="/heima2020/assets/js/25.0001c7c1.js"><link rel="prefetch" href="/heima2020/assets/js/26.aa4d65a5.js"><link rel="prefetch" href="/heima2020/assets/js/27.baffff1d.js"><link rel="prefetch" href="/heima2020/assets/js/28.20430dcf.js"><link rel="prefetch" href="/heima2020/assets/js/29.7bbc3c04.js"><link rel="prefetch" href="/heima2020/assets/js/3.0076a912.js"><link rel="prefetch" href="/heima2020/assets/js/30.5f74696f.js"><link rel="prefetch" href="/heima2020/assets/js/31.a0bf56d6.js"><link rel="prefetch" href="/heima2020/assets/js/32.dd5a93dd.js"><link rel="prefetch" href="/heima2020/assets/js/33.92de7335.js"><link rel="prefetch" href="/heima2020/assets/js/34.bf468ed6.js"><link rel="prefetch" href="/heima2020/assets/js/35.28502be1.js"><link rel="prefetch" href="/heima2020/assets/js/36.3622a14c.js"><link rel="prefetch" href="/heima2020/assets/js/37.626e17d3.js"><link rel="prefetch" href="/heima2020/assets/js/38.860020b8.js"><link rel="prefetch" href="/heima2020/assets/js/39.c092c283.js"><link rel="prefetch" href="/heima2020/assets/js/40.a6ba2743.js"><link rel="prefetch" href="/heima2020/assets/js/41.43d70bcd.js"><link rel="prefetch" href="/heima2020/assets/js/42.6486a709.js"><link rel="prefetch" href="/heima2020/assets/js/43.670b256a.js"><link rel="prefetch" href="/heima2020/assets/js/44.eb371480.js"><link rel="prefetch" href="/heima2020/assets/js/45.5b45f11e.js"><link rel="prefetch" href="/heima2020/assets/js/46.bc59be94.js"><link rel="prefetch" href="/heima2020/assets/js/47.ec36fca9.js"><link rel="prefetch" href="/heima2020/assets/js/48.51e80f8f.js"><link rel="prefetch" href="/heima2020/assets/js/5.6eb7e243.js"><link rel="prefetch" href="/heima2020/assets/js/6.1b7d5a6d.js"><link rel="prefetch" href="/heima2020/assets/js/7.f611fe3c.js"><link rel="prefetch" href="/heima2020/assets/js/8.c14cc922.js"><link rel="prefetch" href="/heima2020/assets/js/9.cd5538bb.js">
    <link rel="stylesheet" href="/heima2020/assets/css/0.styles.aa663799.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/heima2020/" class="home-link router-link-active"><!----> <span class="site-name">Megasu的笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/heima2020/" class="nav-link">
  首页
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/heima2020/node/day01" class="sidebar-heading clickable open"><span>Node</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/heima2020/node/day01.html" class="sidebar-link">Node 第 1 天</a></li><li><a href="/heima2020/node/day02.html" class="sidebar-link">Node 第 2 天</a></li><li><a href="/heima2020/node/day03.html" class="sidebar-link">Node 第 3 天</a></li><li><a href="/heima2020/node/day04.html" class="sidebar-link">Node 第 4 天</a></li><li><a href="/heima2020/node/day05.html" class="sidebar-link">Node 第 5 天</a></li><li><a href="/heima2020/node/day06.html" class="sidebar-link">Node 第 6 天</a></li><li><a href="/heima2020/node/day07.html" class="sidebar-link">Node 第 7 天</a></li><li><a href="/heima2020/node/day08.html" class="sidebar-link">Node 第 8 天</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="好客租房项目"><a href="#好客租房项目" class="header-anchor">#</a> 好客租房项目</h2> <h3 id="项目介绍"><a href="#项目介绍" class="header-anchor">#</a> 项目介绍</h3> <p>好客租房一个在线租房项目，拥有租户和房东，房东可以在上面发布房源，租户可以在上面寻求环合适的房源。</p> <h3 id="在线案例"><a href="#在线案例" class="header-anchor">#</a> <a href="https://m-haoke-web.itheima.net/home" target="_blank" rel="noopener noreferrer">在线案例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <div class="language-html extra-class"><pre class="language-html"><code>https://m-haoke-web.itheima.net/home
</code></pre></div><p><img src="/heima2020/assets/img/1591060929046.d783731a.png" alt="1591060929046"></p> <h3 id="接口文档"><a href="#接口文档" class="header-anchor">#</a> <a href="http://157.122.54.189:9060/" target="_blank" rel="noopener noreferrer">接口文档<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <div class="language-html extra-class"><pre class="language-html"><code>http://157.122.54.189:9060/
</code></pre></div><h3 id="用到的技术"><a href="#用到的技术" class="header-anchor">#</a> 用到的技术</h3> <ul><li><a href="https://www.reactjs.org/" target="_blank" rel="noopener noreferrer">react 官方文档<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://create-react-app.dev/" target="_blank" rel="noopener noreferrer">react 脚手架<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://mobile.ant.design/index-cn" target="_blank" rel="noopener noreferrer">ant desigh mobile 蚂蚁金服 UI 框架<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://reacttraining.com/react-router/web/guides/quick-start" target="_blank" rel="noopener noreferrer">路由 react-router-dom<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://redux.js.org/basics/actions" target="_blank" rel="noopener noreferrer">状态管理 redux<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://react-redux.js.org/" target="_blank" rel="noopener noreferrer">状态管理 react-redux<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://www.axios-js.com/" target="_blank" rel="noopener noreferrer">请求发送 axios<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://lbsyun.baidu.com/" target="_blank" rel="noopener noreferrer">百度地图<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="https://github.com/bvaughn/react-virtualized" target="_blank" rel="noopener noreferrer">虚拟列表 react-virtualized<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h3 id="码云地址"><a href="#码云地址" class="header-anchor">#</a> <a href="https://gitee.com/gzqd201802/React43_44.git" target="_blank" rel="noopener noreferrer">码云地址<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <p>在线仓库：包含了 React 基础 + 项目。</p> <div class="language-js extra-class"><pre class="language-js"><code>https<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span>gitee<span class="token punctuation">.</span>com<span class="token operator">/</span>gzqd201802<span class="token operator">/</span>React43_44<span class="token punctuation">.</span>git
</code></pre></div><p><img src="/heima2020/assets/img/1591061550759.b9cd70f9.png" alt="1591061550759"></p> <h2 id="项目页面结构"><a href="#项目页面结构" class="header-anchor">#</a> 项目页面结构</h2> <p>项目共六个页面，页面组件存放到 <code>src\pages</code> 文件夹中。</p> <h3 id="搭建页面结构"><a href="#搭建页面结构" class="header-anchor">#</a> 搭建页面结构</h3> <table><thead><tr><th>页面组件</th> <th>页面描述</th></tr></thead> <tbody><tr><td>Home</td> <td>存放 tabbar 的页面</td></tr> <tr><td>Found</td> <td>列表找房</td></tr> <tr><td>Index</td> <td>首页</td></tr> <tr><td>CitySelect</td> <td>城市选择</td></tr> <tr><td>MapFound</td> <td>地图找房</td></tr> <tr><td>My</td> <td>我的</td></tr></tbody></table> <h3 id="页面组件路径"><a href="#页面组件路径" class="header-anchor">#</a> 页面组件路径</h3> <div class="language- extra-class"><pre class="language-text"><code>src\pages\Home\index.js
src\pages\Found\index.js
src\pages\My\index.js
src\pages\Index\index.js
src\pages\CitySelect\index.js
src\pages\MapFound\index.js
</code></pre></div><p><img src="/heima2020/assets/img/1591026201252.a025b58b.png" alt=""></p> <h2 id="项目样式"><a href="#项目样式" class="header-anchor">#</a> 项目样式</h2> <p>项目使用 <code>scss</code> 书写样式，全局样式存放到 <code>src\styles</code> 文件夹中。</p> <h3 id="安装依赖"><a href="#安装依赖" class="header-anchor">#</a> 安装依赖</h3> <div class="language- extra-class"><pre class="language-text"><code>yarn add node-sass
</code></pre></div><h3 id="全局样式"><a href="#全局样式" class="header-anchor">#</a> 全局样式</h3> <p><code>src\styles\App.scss</code></p> <h3 id="css3-变量"><a href="#css3-变量" class="header-anchor">#</a> CSS3 变量</h3> <p><code>src\styles\variable.scss</code></p> <h3 id="样式初始化"><a href="#样式初始化" class="header-anchor">#</a> 样式初始化</h3> <p><code>src\styles\reset.scss</code></p> <h3 id="css-模块化编程"><a href="#css-模块化编程" class="header-anchor">#</a> css 模块化编程</h3> <p><img src="/heima2020/assets/img/1591077911126.eae37bb2.png" alt="1591077911126"></p> <p><img src="/heima2020/assets/img/1591077890033.745b6c5c.png" alt="1591077890033"></p> <h2 id="ant-design-mobile"><a href="#ant-design-mobile" class="header-anchor">#</a> ant-design-mobile</h2> <h3 id="介绍"><a href="#介绍" class="header-anchor">#</a> 介绍</h3> <p><code>antd</code> 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。</p> <p><code>antd-mobile</code> 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。</p> <p>antd-mobile 官方文档：https://mobile.ant.design/docs/react/introduce-cn</p> <h3 id="安装和使用步骤"><a href="#安装和使用步骤" class="header-anchor">#</a> 安装和使用步骤</h3> <p>参考地址：https://mobile.ant.design/docs/react/use-with-create-react-app-cn</p> <ol><li><p>安装依赖</p> <div class="language-shell extra-class"><pre class="language-shell"><code><span class="token function">yarn</span> <span class="token function">add</span> react-app-rewired customize-cra antd-mobile babel-plugin-import
</code></pre></div></li> <li><p>修改 <code>package.json</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code>  <span class="token string">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;start&quot;</span><span class="token operator">:</span> <span class="token string">&quot;react-app-rewired start&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;react-app-rewired build&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;test&quot;</span><span class="token operator">:</span> <span class="token string">&quot;react-app-rewired test --env=jsdom&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre></div></li> <li><p>然后在项目根目录创建一个 <code>config-overrides.js</code> 用于修改默认配置</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> override<span class="token punctuation">,</span> fixBabelImports <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;customize-cra&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">override</span><span class="token punctuation">(</span>
  <span class="token function">fixBabelImports</span><span class="token punctuation">(</span><span class="token string">&quot;import&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    libraryName<span class="token operator">:</span> <span class="token string">&quot;antd-mobile&quot;</span><span class="token punctuation">,</span>
    style<span class="token operator">:</span> <span class="token string">&quot;css&quot;</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>直接在 组件中使用即可</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">&quot;react&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 1 引入 antd 组件</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;antd-mobile&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token comment">/* 2 使用 antd 组件 */</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h2 id="tabbar-组件配置"><a href="#tabbar-组件配置" class="header-anchor">#</a> TabBar 组件配置</h2> <h3 id="把例子运行起来"><a href="#把例子运行起来" class="header-anchor">#</a> 把例子运行起来</h3> <p><img src="/heima2020/assets/img/1591069328180.edd9e37e.png" alt=""></p> <h3 id="阅读组件的属性"><a href="#阅读组件的属性" class="header-anchor">#</a> 阅读组件的属性</h3> <ol><li>心要大，敢于精简删除实例代码。</li> <li>看属性的时候注意数据类型。</li></ol> <h2 id="react-router-dom"><a href="#react-router-dom" class="header-anchor">#</a> react-router-dom</h2> <p>项目使用 <code>react-router-dom</code> 做页面路由管理。</p> <h3 id="安装"><a href="#安装" class="header-anchor">#</a> 安装</h3> <div class="language- extra-class"><pre class="language-text"><code>yarn add react-router-dom
</code></pre></div><h2 id="路由划分"><a href="#路由划分" class="header-anchor">#</a> 路由划分</h2> <h3 id="页面组件和路由"><a href="#页面组件和路由" class="header-anchor">#</a> 页面组件和路由</h3> <table><thead><tr><th>页面组件</th> <th>路由匹配</th> <th>页面描述</th> <th>备注</th></tr></thead> <tbody><tr><td>Home</td> <td>/home</td> <td>存放 tabbar 的页面</td> <td>一级路由</td></tr> <tr><td>CitySelect</td> <td>/cityselect</td> <td>城市选择</td> <td>一级路由</td></tr> <tr><td>MapFound</td> <td>/mapfound</td> <td>地图找房</td> <td>一级路由</td></tr> <tr><td>Index</td> <td>/home/index</td> <td>tabbar 的首页</td> <td>二级路由</td></tr> <tr><td>Found</td> <td>/home/found</td> <td>tabbar 的列表找房</td> <td>二级路由</td></tr> <tr><td>My</td> <td>/home/my</td> <td>tabbar 的个人中心</td> <td>二级路由</td></tr></tbody></table> <h3 id="路由划分图示"><a href="#路由划分图示" class="header-anchor">#</a> 路由划分图示</h3> <p><img src="/heima2020/assets/img/1591078834956.15eecd56.png" alt="1591078834956"></p> <h3 id="一级路由"><a href="#一级路由" class="header-anchor">#</a> 一级路由</h3> <p>一级路由在 App 根组件配置 <code>src\App.js</code> 。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token string">'./styles/App.scss'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> HashRouter<span class="token punctuation">,</span> Route<span class="token punctuation">,</span> Switch<span class="token punctuation">,</span> Redirect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-router-dom&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> Home <span class="token keyword">from</span> <span class="token string">'./pages/Home'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> CitySelect <span class="token keyword">from</span> <span class="token string">'./pages/CitySelect'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> MapFound <span class="token keyword">from</span> <span class="token string">'./pages/MapFound'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> PageNotFound <span class="token keyword">from</span> <span class="token string">'./pages/PageNotFound'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">HashRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">exact</span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Redirect</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Redirect</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Home<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/cityselect<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>CitySelect<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/mapfound<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>MapFound<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">exact</span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>PageNotFound<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Switch</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">HashRouter</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>

</code></pre></div><h3 id="二级路由"><a href="#二级路由" class="header-anchor">#</a> 二级路由</h3> <p>二级路由在 Home 组件中配置  <code>src\pages\Home\index.js</code> 。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Route<span class="token punctuation">,</span> Redirect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-router-dom'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> Index <span class="token keyword">from</span> <span class="token string">'../Index'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Found <span class="token keyword">from</span> <span class="token string">'../Found'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> My <span class="token keyword">from</span> <span class="token string">'../My'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Home</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>

  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">exact</span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Redirect</span></span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/index<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Redirect</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/index<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Index<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/found<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>Found<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Route</span></span> <span class="token attr-name">path</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/home/my<span class="token punctuation">&quot;</span></span> <span class="token attr-name">component</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>My<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Route</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> Home<span class="token punctuation">;</span>
</code></pre></div><h3 id="tabbar-组件结合路由使用"><a href="#tabbar-组件结合路由使用" class="header-anchor">#</a> TabBar 组件结合路由使用</h3> <p>选中状态核心代码参考</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code>selected<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>location<span class="token punctuation">.</span>pathname <span class="token operator">===</span> <span class="token string">'/home/index'</span><span class="token punctuation">}</span>
onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/home/index'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre></div><h2 id="axios"><a href="#axios" class="header-anchor">#</a> axios</h2> <p>项目使用 <code>axios</code> 库发送请求获取数据。</p> <h3 id="安装-2"><a href="#安装-2" class="header-anchor">#</a> 安装</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code>yarn add axios
</code></pre></div><p>axios 是 web 端用于发送请求的库，是web端通用的库，并不是 Vue 项目专属的，原生 JS 项目，React 项目都可以使用。</p> <h2 id="特别容易出错的地方"><a href="#特别容易出错的地方" class="header-anchor">#</a> 特别容易出错的地方</h2> <ol><li>路由划分。</li> <li>tabBar 组件使用。</li> <li>tabBar 和路由关联起来。</li></ol> <h2 id="react-局部样式"><a href="#react-局部样式" class="header-anchor">#</a> React 局部样式</h2> <p>要安装脚手架要求命名 局部样式 文件：<code>xxx.module.scss</code>   或  <code>xxx.module.css</code></p> <ol><li>导入局部样式</li></ol> <div class="language- extra-class"><pre class="language-text"><code>import css from './index.module.scss';
</code></pre></div><ol start="2"><li>需要通过对象的方式访问从命名的类名</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>css<span class="token punctuation">.</span>entry<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h2 id="分享-如何快速替换局部样式类名"><a href="#分享-如何快速替换局部样式类名" class="header-anchor">#</a> 分享：如何快速替换局部样式类名</h2> <p>快捷键：</p> <p>Ctrl + D                            选择相同词。     <code>className=&quot;</code></p> <p>Ctrl+Shift + 右箭头         选择右边单词</p> <p>Ctrl+X								剪切</p> <p>Ctrl+V								粘贴</p> <h2 id="分享-css-tree-生成样式结构"><a href="#分享-css-tree-生成样式结构" class="header-anchor">#</a> 分享：Css Tree 生成样式结构</h2> <ol><li>安装 VS Code 插件 Css Tree</li> <li>选中想要样式树生成的 HTML 结构</li> <li>Ctrl+Shift+P 在弹出的输入框中输入 CSS tree ，按回车就可以生成样式结构了。</li></ol> <h2 id="移动端项目适配"><a href="#移动端项目适配" class="header-anchor">#</a> 移动端项目适配</h2> <p>写项目的时候，可以先用 px 写布局。单位的转换都是后续一次性完成。</p> <h3 id="适配单位"><a href="#适配单位" class="header-anchor">#</a> 适配单位</h3> <ul><li><strong>vw</strong> : 1vw 等于视口宽度的1%</li> <li><strong>vh</strong> : 1vh 等于视口高度的1%</li></ul> <p>视口单位区别于<code>%</code>单位，视口单位是依赖于视口的尺寸，根据视口尺寸的百分比来定义的；</p> <p>而<code>%</code>单位则是依赖于元素的祖先元素。</p> <p><img src="" alt="viewport.png"></p> <h3 id="计算题"><a href="#计算题" class="header-anchor">#</a> 计算题</h3> <p>设计稿宽：375px</p> <p>屏幕宽：100vw    ===    375px</p> <p>转换：48px === ? vw           ==转换计算==&gt;         48 / 375 * 100vw</p> <h2 id="scss-高级语法"><a href="#scss-高级语法" class="header-anchor">#</a> SCSS 高级语法</h2> <p>目的：我们利用 SCSS 封装一个计算 vw 的函数。</p> <p>SCSS 只是一个CSS预处理器，最终还是生成了 CSS，只不过没有用过，注意 SCSS 并不是 React 专属的。</p> <ul><li>自定义变量</li> <li>自定义函数</li> <li>自定义混入</li></ul> <h3 id="回顾-js-语法"><a href="#回顾-js-语法" class="header-anchor">#</a> 回顾 JS 语法</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// JS 的变量存放设计稿宽度</span>
<span class="token keyword">const</span> deviceWidth <span class="token operator">=</span> <span class="token number">375</span><span class="token punctuation">;</span>

<span class="token comment">// 封装一个通过 px 计算 vw 单位的函数</span>
<span class="token keyword">function</span> <span class="token function">vw</span><span class="token punctuation">(</span><span class="token parameter">px</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> px <span class="token operator">/</span> deviceWidth <span class="token operator">*</span> <span class="token number">100</span> <span class="token operator">+</span> <span class="token string">'vw'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">// 调用函数</span>
    width<span class="token operator">:</span> <span class="token function">vw</span><span class="token punctuation">(</span><span class="token number">48</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>style<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="scss-函数封装"><a href="#scss-函数封装" class="header-anchor">#</a> SCSS 函数封装</h3> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// SCSS 变量 - 定义设计稿宽度</span>
<span class="token property"><span class="token variable">$deviceWidth</span></span><span class="token punctuation">:</span> 375<span class="token punctuation">;</span>

<span class="token comment">// 封装 px 转换成 vw 单位的函数</span>
<span class="token keyword">@function</span> <span class="token function">vw</span><span class="token punctuation">(</span><span class="token variable">$px</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 计算完成后返回</span>
  <span class="token keyword">@return</span> <span class="token variable">$px</span> <span class="token operator">/</span> <span class="token variable">$deviceWidth</span> <span class="token operator">*</span> 100vw<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>调用</p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.box02 </span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">vw</span><span class="token punctuation">(</span>100<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">vw</span><span class="token punctuation">(</span>100<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="自定义混入"><a href="#自定义混入" class="header-anchor">#</a> 自定义混入</h3> <p>封装多行代码。</p> <h4 id="定义"><a href="#定义" class="header-anchor">#</a> 定义</h4> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// 定义混入类 - 相当于 SCSS 中高级函数</span>
<span class="token keyword">@mixin</span> <span class="token function">ell</span><span class="token punctuation">(</span><span class="token property"><span class="token variable">$line</span></span><span class="token punctuation">:</span> 2<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">text-overflow</span><span class="token punctuation">:</span> ellipsis<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> -webkit-box<span class="token punctuation">;</span>
  <span class="token property">-webkit-line-clamp</span><span class="token punctuation">:</span> <span class="token variable">$line</span><span class="token punctuation">;</span>
  <span class="token property">-webkit-box-orient</span><span class="token punctuation">:</span> vertical<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="使用"><a href="#使用" class="header-anchor">#</a> 使用</h4> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">.box03 </span><span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
  <span class="token comment">// 导入混入类</span>
  <span class="token keyword">@include</span> <span class="token function">ell</span><span class="token punctuation">(</span>3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="scss-和-less-选择器引用"><a href="#scss-和-less-选择器引用" class="header-anchor">#</a> SCSS 和 LESS 选择器引用</h2> <ol><li>嵌套时 &amp; 表示引用父级选择器。</li> <li>编译结果和父级同级。</li></ol> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token comment">// 书写时</span>
<span class="token selector">a </span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
  <span class="token selector"><span class="token parent important">&amp;</span>:hover </span><span class="token punctuation">{</span>
    <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">// 编译成 css 后
a</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">a:hover</span> <span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="搜索框组件封装"><a href="#搜索框组件封装" class="header-anchor">#</a> 搜索框组件封装</h2> <p>搜索框组件小模块比较多，是整个首页结构样式最复杂的模块，搜索框组件写完后，其他页面样式都没那么难了。</p> <ol><li>新建组件 js 文件 <code>src\components\SearchInput\index.js</code></li> <li>新建组件 scss 样式文件 <code>src\components\SearchInput\index.module.scss</code></li></ol> <p>只要是前端的工作，就避不开要自己写样式的时候。</p> <p>返校会有几天休息：大家可以把其他的页面都写一写。可以先不考虑数据请求，就单纯写移动端静态页面即可。</p> <h2 id="百度地图初体验"><a href="#百度地图初体验" class="header-anchor">#</a> 百度地图初体验</h2> <p>https://lbsyun.baidu.com/</p> <p><img src="/heima2020/assets/img/1591172808451.8979cf02.png" alt="1591172808451"></p> <h3 id="使用流程"><a href="#使用流程" class="header-anchor">#</a> 使用流程</h3> <p><img src="/heima2020/assets/img/1591173199704.ed104f7a.png" alt="1591173199704"></p> <h3 id="创建并获取服务密钥"><a href="#创建并获取服务密钥" class="header-anchor">#</a> 创建并获取服务密钥</h3> <p>http://lbs.baidu.com/apiconsole/key#/home</p> <h4 id="创建应用"><a href="#创建应用" class="header-anchor">#</a> 创建应用</h4> <ul><li>应用名称 - 随意</li> <li>应用类型 - 浏览器端</li> <li>启用服务 - 全部选上</li> <li>Referer 白名单 - * 代表不做限制</li></ul> <h4 id="创建应用参考图示"><a href="#创建应用参考图示" class="header-anchor">#</a> 创建应用参考图示</h4> <p><img src="/heima2020/assets/img/1591173703560.7df12437.png" alt="1591173703560"></p> <h4 id="复制密钥"><a href="#复制密钥" class="header-anchor">#</a> 复制密钥</h4> <div class="language- extra-class"><pre class="language-text"><code>LTcdtaUhvwYYnvWd90tfvhBYBGgxmwbC
</code></pre></div><p><img src="/heima2020/assets/img/1591176817221.84150290.png" alt="1591176817221"></p> <h3 id="百度地图初体验-2"><a href="#百度地图初体验-2" class="header-anchor">#</a> 百度地图初体验</h3> <h4 id="基本使用步骤"><a href="#基本使用步骤" class="header-anchor">#</a> 基本使用步骤</h4> <ol><li>HTML 地图容器，div 标签上有 id 属性。</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="2"><li>CSS 地图容器设定个高度。</li></ol> <div class="language-HTML extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">#container</span> <span class="token punctuation">{</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="3"><li>JS 百度地图引包，链接中添加你申请的密钥。</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://api.map.baidu.com/api?v=3.0&amp;ak=LTcdtaUhvwYYnvWd90tfvhBYBGgxmwbC<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ol start="4"><li>启动启动功能</li></ol> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token comment">// BMap 全局变量，通过 script 标签引入的</span>
    <span class="token comment">// 创建地图实例  - 和容器关联起来</span>
    <span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span><span class="token string">&quot;container&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 创建点坐标 - 经纬度</span>
    <span class="token comment">// 经度   longitude    116.404</span>
    <span class="token comment">// 纬度   latitude     39.915</span>
    <span class="token keyword">var</span> point <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Point</span><span class="token punctuation">(</span><span class="token number">113.27</span><span class="token punctuation">,</span> <span class="token number">23.13</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 初始化地图，设置中心点坐标和地图级别</span>
    map<span class="token punctuation">.</span><span class="token function">centerAndZoom</span><span class="token punctuation">(</span>point<span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="开发指南-定位-ip定位"><a href="#开发指南-定位-ip定位" class="header-anchor">#</a> 开发指南 - 定位 - IP定位</h4> <p>http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/geolocation</p> <p>参考代码</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Map</span><span class="token punctuation">(</span><span class="token string">&quot;allmap&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> point <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Point</span><span class="token punctuation">(</span><span class="token number">116.331398</span><span class="token punctuation">,</span> <span class="token number">39.897445</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
map<span class="token punctuation">.</span><span class="token function">centerAndZoom</span><span class="token punctuation">(</span>point<span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">myFun</span><span class="token punctuation">(</span><span class="token parameter">result</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> cityName <span class="token operator">=</span> result<span class="token punctuation">.</span>name<span class="token punctuation">;</span>
    map<span class="token punctuation">.</span><span class="token function">setCenter</span><span class="token punctuation">(</span>cityName<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;当前定位城市:&quot;</span> <span class="token operator">+</span> cityName<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> myCity <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>LocalCity</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
myCity<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>myFun<span class="token punctuation">)</span><span class="token punctuation">;</span> 
</code></pre></div><h4 id="思考题"><a href="#思考题" class="header-anchor">#</a> 思考题</h4> <p>BMap 是百度地图的核心对象，内部封装了好多 API ，根据前面的初体验，思考以下问题。</p> <ul><li>BMap.Map()             用来干什么？</li> <li>BMap.Point()            用来干什么？</li> <li>BMap.LocalCity()     用来干什么？</li></ul> <p>!!! 思考题：能否精简 IP定位代码，只需要获取 ip 地址，不需要看到地图？</p> <h2 id="百度地图获取定位封装"><a href="#百度地图获取定位封装" class="header-anchor">#</a> 百度地图获取定位封装</h2> <h3 id="百度地图的基本使用"><a href="#百度地图的基本使用" class="header-anchor">#</a> 百度地图的基本使用</h3> <h2 id="redux-工作流图示"><a href="#redux-工作流图示" class="header-anchor">#</a> redux 工作流图示</h2> <h3 id="redux-回顾"><a href="#redux-回顾" class="header-anchor">#</a> redux 回顾</h3> <ul><li>仓库  store</li> <li>仓库管理员    reducer</li> <li>action 对象
<ul><li>type 类型</li> <li>value 值</li></ul></li> <li>dispatch 发送通知
<ul><li>发送 action 对象</li> <li>管理员根据 action 对象类型实现对应修改</li></ul></li> <li>获取状态</li> <li>订阅</li></ul> <h3 id="工作流图示回顾"><a href="#工作流图示回顾" class="header-anchor">#</a> 工作流图示回顾</h3> <p><img src="/heima2020/assets/img/1591575431532.d717614b.png" alt="1591575431532"></p> <h3 id="react-redux-和原生-redux-区别"><a href="#react-redux-和原生-redux-区别" class="header-anchor">#</a> react-redux 和原生 redux 区别</h3> <p>react-redux  是基于 redux  上封装的插件包。</p> <ul><li>简化订阅和取消订阅的过程。</li> <li>简化了 getState 获取仓库数据的流程 - 通过映射方式在组件属性中直接获取。</li> <li>简化了 dispacth 发送 action 修改仓库数据的方法。</li></ul> <h3 id="使用流程-2"><a href="#使用流程-2" class="header-anchor">#</a> 使用流程</h3> <ol><li>安装 <code>redux</code> 和 <code>react-redux</code></li></ol> <div class="language- extra-class"><pre class="language-text"><code>yarn add  redux  react-redux
</code></pre></div><ol start="2"><li>创建管理员 <code>src\store\index.js</code></li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 默认仓库状态</span>
<span class="token keyword">const</span> defaultState <span class="token operator">=</span> <span class="token punctuation">{</span>
  address<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  userInfo<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token comment">// 管理员</span>
<span class="token keyword">const</span> <span class="token function-variable function">reducer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span> action</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 根据不同的 action 对仓库进行不同的操作</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">'get_city'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> newState <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    newState<span class="token punctuation">.</span>address <span class="token operator">=</span> action<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
    <span class="token keyword">return</span> newState<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">// 没有 action 直接返回仓库数据</span>
  <span class="token keyword">return</span> state<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> reducer<span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>仓库入口文件 <code>src/store/index.js</code></li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 解构创建仓库的方法</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> createStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// 导入仓库管理员</span>
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span><span class="token punctuation">;</span>

<span class="token comment">// 创建仓库并传入管理员</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>reducer<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span>
</code></pre></div><ol start="4"><li>项目入口文件  <code>src\index.js</code></li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Provider <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-redux&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">&quot;./store&quot;</span><span class="token punctuation">;</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Provider</span></span> <span class="token attr-name">store</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>store<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">App</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Provider</span></span><span class="token punctuation">&gt;</span></span><span class="token punctuation">,</span>
  document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="5"><li>组件中使用 <code>src\pages\CitySelect\index.js</code></li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token comment">// 联系代理商的方法 connect</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> connect <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-redux&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">CitySelect</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>

  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>cityName<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 把仓库 state 映射到组件的 props 上的函数</span>
<span class="token keyword">const</span> <span class="token function-variable function">mapStateToProps</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
  cityName<span class="token operator">:</span> state<span class="token punctuation">.</span>address<span class="token punctuation">.</span>city
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// connect 联系 react-redux 代理商，</span>
<span class="token comment">// 把仓库的 state 映射到 CitySelect 组件的 props 上</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">connect</span><span class="token punctuation">(</span>mapStateToProps<span class="token punctuation">)</span><span class="token punctuation">(</span>CitySelect<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="仓库流程图"><a href="#仓库流程图" class="header-anchor">#</a> 仓库流程图</h3> <p><img src="/heima2020/assets/img/1591587134528.9bf9948d.png" alt="1591587134528"></p> <h2 id="让子组件拥有路由对象"><a href="#让子组件拥有路由对象" class="header-anchor">#</a> 让子组件拥有路由对象</h2> <h3 id="使用步骤"><a href="#使用步骤" class="header-anchor">#</a> 使用步骤</h3> <ol><li>普通组件导入 <code>withRouter</code> 函数</li></ol> <p><code>src\components\SearchInput\index.js</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> withRouter <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;react-router-dom&quot;</span><span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>增强普通组件</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">withRouter</span><span class="token punctuation">(</span>SearchInput<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>普通组件内访问</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>history<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/cityselect'</span><span class="token punctuation">)</span> 
</code></pre></div><h2 id="城市选择页"><a href="#城市选择页" class="header-anchor">#</a> 城市选择页</h2> <h3 id="数据的结构"><a href="#数据的结构" class="header-anchor">#</a> 数据的结构</h3> <p><img src="/heima2020/assets/img/1591574602849.7608137a.png" alt="1591574602849"></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> finallList <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    title<span class="token operator">:</span><span class="token string">'当前城市'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'广州'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token operator">:</span><span class="token string">'热门城市'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'北京'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'广州'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'上海'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'深圳'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token operator">:</span> <span class="token string">'A'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'安庆'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    title<span class="token operator">:</span> <span class="token string">'B'</span><span class="token punctuation">,</span>
    children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'北京'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span> city<span class="token operator">:</span><span class="token string">'宝鸡'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">]</span>

</code></pre></div><h3 id="城市数据处理"><a href="#城市数据处理" class="header-anchor">#</a> 城市数据处理</h3> <p><code>src\pages\CitySelect\index.js</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">async</span> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> finallList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

    <span class="token comment">// 数据1： 当前城市</span>
    <span class="token keyword">const</span> cityName <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>cityName<span class="token punctuation">;</span>
    finallList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'当前城市'</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> city<span class="token operator">:</span> cityName <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 数据2：热门城市</span>
    <span class="token keyword">const</span> cityHot <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://157.122.54.189:9060/area/hot'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>body<span class="token punctuation">;</span>
    finallList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">'热门城市'</span><span class="token punctuation">,</span>
      children<span class="token operator">:</span> cityHot<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">v</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> city<span class="token operator">:</span> v<span class="token punctuation">.</span>label <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// 数据3：城市列表 - 难点</span>
    <span class="token keyword">const</span> cityList <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://157.122.54.189:9060/area/city?level=1'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>body<span class="token punctuation">;</span>
    <span class="token comment">// 城市数据按照缩写排序</span>
    cityList<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span>short <span class="token operator">&gt;</span> b<span class="token punctuation">.</span>short <span class="token operator">?</span> <span class="token number">1</span> <span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    cityList<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> firstLetter <span class="token operator">=</span> item<span class="token punctuation">.</span>short<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> index <span class="token operator">=</span> finallList<span class="token punctuation">.</span><span class="token function">findIndex</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>title <span class="token operator">===</span> firstLetter<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        finallList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          title<span class="token operator">:</span> firstLetter<span class="token punctuation">,</span>
          children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> city<span class="token operator">:</span> item<span class="token punctuation">.</span>label <span class="token punctuation">}</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        finallList<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> city<span class="token operator">:</span> item<span class="token punctuation">.</span>label <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> finallList <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

</code></pre></div><h2 id="在局部样式中修改全局样式"><a href="#在局部样式中修改全局样式" class="header-anchor">#</a> 在局部样式中修改全局样式</h2> <p>全局样式通过 :global 包裹起来即可，类似于 vue 中的  /deep/，是打包工具的规定，不同打包工具写法不同。</p> <h3 id="参考代码"><a href="#参考代码" class="header-anchor">#</a> 参考代码</h3> <p><code>src\pages\CitySelect\index.module.scss</code></p> <div class="language-scss extra-class"><pre class="language-scss"><code><span class="token selector">:global </span><span class="token punctuation">{</span>
	<span class="token comment">// 组件库的类名，在局部样式中不改名</span>
	<span class="token selector">.am-navbar-light</span><span class="token punctuation">{</span>
	   
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre></div><h2 id="axios-封装"><a href="#axios-封装" class="header-anchor">#</a> axios 封装</h2> <h3 id="toast-轻提示组件"><a href="#toast-轻提示组件" class="header-anchor">#</a> Toast 轻提示组件</h3> <p>优势：可以通过 JS 方式调用组件。</p> <p>文档链接：https://mobile.ant.design/components/toast-cn/</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 显示 loading</span>
Toast<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token string">'疯狂加载中...'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 隐藏 loading </span>
 Toast<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre></div><h3 id="参考代码-2"><a href="#参考代码-2" class="header-anchor">#</a> 参考代码</h3> <p><code>src\utils\request.js</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Toast <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd-mobile'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">const</span> baseURL <span class="token operator">=</span> <span class="token string">'http://157.122.54.189:9060'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> request <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> baseURL <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> ajaxCount <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
request<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">config</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  ajaxCount<span class="token operator">++</span><span class="token punctuation">;</span>
  Toast<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span><span class="token string">'疯狂加载中...'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> config<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

request<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  ajaxCount<span class="token operator">--</span><span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>ajaxCount <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    Toast<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> response<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

</code></pre></div><h2 id="react-虚拟列表-插件"><a href="#react-虚拟列表-插件" class="header-anchor">#</a> React 虚拟列表 - 插件</h2> <h3 id="基本概念"><a href="#基本概念" class="header-anchor">#</a> 基本概念</h3> <ol><li><p>虚拟列表</p> <div class="language- extra-class"><pre class="language-text"><code>数据还是10万个  但是页面的dom元素 最多只能看到 20 个 
</code></pre></div></li> <li><p>可视区域渲染</p> <div class="language- extra-class"><pre class="language-text"><code>DOM 只在可视区域内 渲染
</code></pre></div></li></ol> <p><img src="/heima2020/assets/img/image-20200418105042835-1591760832754.8bc11b9d.png" alt="image-20200418105042835"></p> <h3 id="插件的名称-react-virtualized"><a href="#插件的名称-react-virtualized" class="header-anchor">#</a> <a href="https://github.com/bvaughn/react-virtualized" target="_blank" rel="noopener noreferrer">插件的名称 react-virtualized<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></h3> <h3 id="仓库地址"><a href="#仓库地址" class="header-anchor">#</a> 仓库地址</h3> <p>gitHub 仓库：https://github.com/bvaughn/react-virtualized</p> <p>长列表体验：https://bvaughn.github.io/react-virtualized/#/components/List</p> <h3 id="官方例子初体验"><a href="#官方例子初体验" class="header-anchor">#</a> 官方例子初体验</h3> <ol><li><p>安装依赖</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">add</span> react-virtualized
</code></pre></div></li> <li><p>修改一下样式</p> <blockquote><p>滚动容器的样式</p></blockquote> <div class="language-css extra-class"><pre class="language-css"><code>  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vh - 45px<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
</code></pre></div></li> <li><p><a href="https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md" target="_blank" rel="noopener noreferrer">List文档<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span> Component <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> <span class="token punctuation">{</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-virtualized'</span><span class="token punctuation">;</span>

<span class="token comment">// List data as an array of strings</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token function">String</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">101</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 会在 List组件 循环调用</span>
<span class="token keyword">function</span> <span class="token function">rowRenderer</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> key<span class="token punctuation">,</span> index<span class="token punctuation">,</span> isScrolling<span class="token punctuation">,</span> isVisible<span class="token punctuation">,</span> style<span class="token punctuation">,</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token comment">// 类似以前自己写的map 中的函数  value item </span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      --</span><span class="token punctuation">{</span>list<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token plain-text">--
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">class</span> <span class="token class-name">ReactList</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span>List
        <span class="token comment">// List的宽度</span>
        width<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">300</span><span class="token punctuation">}</span>
        <span class="token comment">// List的高度</span>
        height<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">300</span><span class="token punctuation">}</span>
        <span class="token comment">// 数组的长度</span>
        rowCount<span class="token operator">=</span><span class="token punctuation">{</span>list<span class="token punctuation">.</span>length<span class="token punctuation">}</span>
        <span class="token comment">// 每一行的高度</span>
        rowHeight<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">40</span><span class="token punctuation">}</span>
        <span class="token comment">// 如何渲染每一行标签</span>
        rowRenderer<span class="token operator">=</span><span class="token punctuation">{</span>rowRenderer<span class="token punctuation">}</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> ReactList<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_5-个必要属性解读"><a href="#_5-个必要属性解读" class="header-anchor">#</a> 5 个必要属性解读</h3> <p>文档地址：https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md</p> <p>阅读手册的时候，要按规范来，注意 List 组件属性的数据类型。</p> <table><thead><tr><th>List 组件属性</th> <th>数据类型</th> <th>说明</th></tr></thead> <tbody><tr><td>width</td> <td>Number</td> <td>分区宽度</td></tr> <tr><td>height</td> <td>Number</td> <td>分区高度</td></tr> <tr><td>rowCount</td> <td>Number</td> <td>行数</td></tr> <tr><td>rowHeight</td> <td>Number  或  Function</td> <td>一个大行的高度</td></tr> <tr><td>rowRenderer</td> <td>Function</td> <td>负责渲染一个大行的函数</td></tr></tbody></table> <h3 id="参考代码-3"><a href="#参考代码-3" class="header-anchor">#</a> 参考代码</h3> <p><code>src\demo\reactList.js</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-virtualized'</span><span class="token punctuation">;</span>

<span class="token comment">// 用于长列表渲染的数组</span>
<span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token string">'Brian Vaughn'</span><span class="token punctuation">,</span>
   <span class="token comment">// 小技巧：快速生成 100 条数据</span>
  <span class="token operator">...</span><span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// And so on...</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>


<span class="token comment">// Render your list</span>
<span class="token keyword">class</span> <span class="token class-name">ReactList</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token comment">// 行渲染函数 - 被 List 组件重复调用</span>
  <span class="token function-variable function">rowRenderer</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> key<span class="token punctuation">,</span> index<span class="token punctuation">,</span> isScrolling<span class="token punctuation">,</span> isVisible<span class="token punctuation">,</span> style<span class="token punctuation">,</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 类似于之前列表渲染的 map 返回的 JSX</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token comment">// key 插件自动生成的 key</span>
      <span class="token comment">// style 插件自动生成的 行内样式</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">key</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>key<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>style<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token punctuation">{</span><span class="token comment">/* list[index] 相当于之前 map 时候的 item */</span><span class="token punctuation">}</span><span class="token plain-text">
        ---</span><span class="token punctuation">{</span>list<span class="token punctuation">[</span>index<span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token plain-text">---
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token comment">// 计算一行高度的函数</span>
  <span class="token function-variable function">rowHeight</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> index <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token number">40</span> <span class="token operator">*</span> index<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token comment">// 核心组件</span>
      <span class="token operator">&lt;</span>List
        <span class="token comment">// 宽度 - Number</span>
        width<span class="token operator">=</span><span class="token punctuation">{</span>window<span class="token punctuation">.</span>screen<span class="token punctuation">.</span>width<span class="token punctuation">}</span>
        <span class="token comment">// 高度 - Number</span>
        height<span class="token operator">=</span><span class="token punctuation">{</span>window<span class="token punctuation">.</span>screen<span class="token punctuation">.</span>height<span class="token punctuation">}</span>
        <span class="token comment">// 行数 - Number</span>
        rowCount<span class="token operator">=</span><span class="token punctuation">{</span>list<span class="token punctuation">.</span>length<span class="token punctuation">}</span>
        <span class="token comment">// 行高度  - Number / Function </span>
        rowHeight<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>rowHeight<span class="token punctuation">}</span>
        <span class="token comment">// 行渲染 - Function - 负责呈现一行</span>
        rowRenderer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>rowRenderer<span class="token punctuation">}</span>
      <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> ReactList<span class="token punctuation">;</span>
</code></pre></div><h2 id="组件-ref-属性"><a href="#组件-ref-属性" class="header-anchor">#</a> 组件 ref 属性</h2> <h3 id="ref-应用场景"><a href="#ref-应用场景" class="header-anchor">#</a> ref 应用场景</h3> <ol><li>获取 DOM 元素，</li> <li>获取到组件。</li></ol> <p>功能同 Vue 的 ref，就是 React 框架的写法上有区别。</p> <h3 id="受控组件"><a href="#受控组件" class="header-anchor">#</a> 受控组件</h3> <p>input  标签部分属性受到 React 的控制，如 onChange 事件其实是基于 input change 原生事件进行封装。</p> <h3 id="非受控"><a href="#非受控" class="header-anchor">#</a> 非受控</h3> <p>没有封装的一些属性怎么办？如想要获取 DOM 元素，调用 DOM 元素上的属性或方法。</p> <h3 id="react-的-ref-写法"><a href="#react-的-ref-写法" class="header-anchor">#</a> React 的 ref 写法</h3> <p>需求：组件加载完毕后，自动获取了 input 输入框的焦点。</p> <p><code>src\demo\RefTest.js</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">RefTest</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  <span class="token comment">// 组件初始化的</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 创建一个 DOM元素 关联</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>myRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// console.log(this.myRef);</span>
    <span class="token comment">// this.myRef.current 就代表原生 input 标签了</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>myRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>myRef<span class="token punctuation">}</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> RefTest<span class="token punctuation">;</span>
</code></pre></div><p>注意：如果 ref 添加到了自定义组件上，其实相当于给自定义组件做了关联。</p> <h2 id="list-长列表组件优化"><a href="#list-长列表组件优化" class="header-anchor">#</a> List 长列表组件优化</h2> <h3 id="主动测量-list-组件所有行的精确高度"><a href="#主动测量-list-组件所有行的精确高度" class="header-anchor">#</a> 主动测量 List 组件所有行的精确高度</h3> <ol><li>给组件添加 ref 属性，用于后续访问该子组件</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">List</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>ListRef<span class="token punctuation">}</span></span>  <span class="token punctuation">/&gt;</span></span>
</code></pre></div><ol start="2"><li>在父组件的构造函数中 初始化 子组件的关联</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code>  <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">super</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>ListRef <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createRef</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>在生命周期函数内主动测量一次精确高度。</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// 调用 List 组件的方法</span>
	<span class="token keyword">this</span><span class="token punctuation">.</span>ListRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">measureAllRows</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="更安全的滚动到行的方法"><a href="#更安全的滚动到行的方法" class="header-anchor">#</a> 更安全的滚动到行的方法</h3> <p>组件的方法，给组件添加 ref 属性，访问到组件再调用组件方法。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">this</span><span class="token punctuation">.</span>ListRef<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">scrollToRow</span><span class="token punctuation">(</span>currentIndex<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="长列表常见-bug-汇总"><a href="#长列表常见-bug-汇总" class="header-anchor">#</a> 长列表常见 bug 汇总</h3> <h4 id="常见-bug1"><a href="#常见-bug1" class="header-anchor">#</a> 常见 bug1</h4> <p>bug1复现：</p> <ol><li>刷新页面</li> <li>点击可视区之外的字母索引</li> <li>高亮字母 和 列表 的对齐就不准确了</li></ol> <p>bug1原因：</p> <p>​    这个插件有点懒，并不会精确进行计算每行的真实高度，只是估算一个大概的高度(官方说的)。</p> <p>bug1解决方案：</p> <p>​    调用 List 组件的 measureAllRows 方法，主动计算每行的真实高度。</p> <h4 id="常见bug2"><a href="#常见bug2" class="header-anchor">#</a> 常见bug2</h4> <p>bug2复现：</p> <p>​    1. 左侧列表 缓慢滚动</p> <p>​    2. 左侧列表有时候会突然跳转到某个错误的位置(不好复现)</p> <p>bug2原因：</p> <p>​    左侧滚动的时候影响到 currentIndex，currentIndex 值改变又倒过来影响左侧列表的滚动。</p> <p>​    使用组件 scrollToIndex 属性不够安全。</p> <p>bug2解决方案：</p> <p>​    注释掉 scrollToIndex={currentIndex} 属性代码。</p> <p>​    使用更安全的 scrollToRow 组件方法实现左列表的滚动。</p> <h4 id="最后"><a href="#最后" class="header-anchor">#</a> 最后</h4> <p>如果没有出现以上bug，说明使用长列表插件姿势正确。</p> <h2 id="await-请求优化"><a href="#await-请求优化" class="header-anchor">#</a> await 请求优化</h2> <p>如果使用 async await 的姿势不对，会容易造成请求时间过长的问题。</p> <h3 id="模拟多请求场景"><a href="#模拟多请求场景" class="header-anchor">#</a> 模拟多请求场景</h3> <p>请求1 需耗时 5 s，请求2 需耗时 3 s，两个请求都完成后，才运行后面的业务代码。</p> <p>问题：如果两个请求都用 await 的写法实现，那总请求时间就需要 5s + 3s，共耗时 8s。</p> <p>如果滥用 await 就造成了不必要的等待时间。</p> <p>优化方向：因为请求可以同时发出去，所以耗时 5s 就可以往后执行业务代码了。</p> <h3 id="生活中的例子"><a href="#生活中的例子" class="header-anchor">#</a> 生活中的例子</h3> <p>未优化方案：去露营，用户 A 去买食物需要 5s，用户 B 去买道具需要 3s，等用户A买完食物后，用户 B 才能去买道具，总时间需要 8s 才可以去露营。</p> <p>优化方案：去露营，用户 A 去买食物需要 5s，用户 B 去买道具需要 3s，两个人同时出发买东西，最快 5s 后就可以去露营了。</p> <h3 id="如何优化"><a href="#如何优化" class="header-anchor">#</a> 如何优化</h3> <p><code>Promise.all</code> 会等待 <code>promise</code> 所有都完成才执行 then 回调 。</p> <p>此方法在集合多个 <code>promise</code> 的返回结果时很有用。</p> <p>基本语法</p> <div class="language- extra-class"><pre class="language-text"><code>Promise.all(  [ promise数组集合 ]   )
</code></pre></div><p>then 写法。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code>Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span> promise1<span class="token punctuation">,</span> promise2<span class="token punctuation">,</span> promise3 <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	返回结果为：res<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>  res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>   res<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>结合 await 使用写法。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span> promise1<span class="token punctuation">,</span> promise2<span class="token punctuation">,</span> promise3 <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
返回结果为：res<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>  res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>   res<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>
</code></pre></div><h3 id="项目中参考代码"><a href="#项目中参考代码" class="header-anchor">#</a> 项目中参考代码</h3> <p><code>src\pages\CitySelect\index.js</code></p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span>request<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/area/hot'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> request<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/area/city?level=1'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> cityHot <span class="token operator">=</span> res<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>body<span class="token punctuation">;</span>
<span class="token keyword">const</span> cityList <span class="token operator">=</span> res<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>body<span class="token punctuation">;</span>
</code></pre></div><p>MDN 详细说明：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all</p> <h2 id="百度地图-api"><a href="#百度地图-api" class="header-anchor">#</a> 百度地图 API</h2> <p>版本选择：2.0</p> <h3 id="相关文档"><a href="#相关文档" class="header-anchor">#</a> 相关文档</h3> <p>入门 -  开发指南：http://lbsyun.baidu.com/index.php?title=jspopular</p> <p>进阶 - 示例DEMO：http://lbsyun.baidu.com/jsdemo.htm#c1_1</p> <p>高级 - 类参考：http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html</p> <h3 id="画地图"><a href="#画地图" class="header-anchor">#</a> 画地图</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    #container {
        height: 100vh;
    }
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>


<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://api.map.baidu.com/api?v=2.0&amp;ak=您的密钥<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
    const map = new BMap.Map(&quot;container&quot;);          // 创建地图实例  
	const point = new BMap.Point(116.404, 39.915);  // 创建点坐标  
	map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别  
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="添加地图控件"><a href="#添加地图控件" class="header-anchor">#</a> 添加地图控件</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code>map<span class="token punctuation">.</span><span class="token function">addControl</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>NavigationControl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="添加坐标点"><a href="#添加坐标点" class="header-anchor">#</a> 添加坐标点</h3> <p>设置中心点，缩放级别。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> point <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Point</span><span class="token punctuation">(</span><span class="token number">116.404</span><span class="token punctuation">,</span> <span class="token number">39.915</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 创建点坐标  </span>
map<span class="token punctuation">.</span><span class="token function">centerAndZoom</span><span class="token punctuation">(</span>point<span class="token punctuation">,</span> <span class="token number">15</span><span class="token punctuation">)</span><span class="token punctuation">;</span>                   <span class="token comment">// 初始化地图，设置中心点坐标和地图级别  </span>
</code></pre></div><h3 id="添加文本覆盖物"><a href="#添加文本覆盖物" class="header-anchor">#</a> 添加文本覆盖物</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> opts <span class="token operator">=</span> <span class="token punctuation">{</span>
	  position <span class="token operator">:</span> point<span class="token punctuation">,</span>    <span class="token comment">// 指定文本标注所在的地理位置</span>
	  offset   <span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Size</span><span class="token punctuation">(</span><span class="token number">30</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">)</span>    <span class="token comment">//设置文本偏移量</span>
	<span class="token punctuation">}</span>
<span class="token keyword">const</span> label <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BMap<span class="token punctuation">.</span>Label</span><span class="token punctuation">(</span><span class="token string">&quot;添加文本&quot;</span><span class="token punctuation">,</span> opts<span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 创建文本标注对象</span>
label<span class="token punctuation">.</span><span class="token function">setStyle</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    color <span class="token operator">:</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">,</span>
    fontSize <span class="token operator">:</span> <span class="token string">&quot;12px&quot;</span><span class="token punctuation">,</span>
    height <span class="token operator">:</span> <span class="token string">&quot;20px&quot;</span><span class="token punctuation">,</span>
    lineHeight <span class="token operator">:</span> <span class="token string">&quot;20px&quot;</span><span class="token punctuation">,</span>
    fontFamily<span class="token operator">:</span><span class="token string">&quot;微软雅黑&quot;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
map<span class="token punctuation">.</span><span class="token function">addOverlay</span><span class="token punctuation">(</span>label<span class="token punctuation">)</span><span class="token punctuation">;</span>  
</code></pre></div><h3 id="添加事件"><a href="#添加事件" class="header-anchor">#</a> 添加事件</h3> <p>百度地图自己封装了一层事件。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code>label<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&quot;click&quot;</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>    
    <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">&quot;您点击了标注&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
</code></pre></div><h2 id="地图找房页"><a href="#地图找房页" class="header-anchor">#</a> 地图找房页</h2> <p>页面路径：<code>src\pages\MapFound\index.js</code></p> <h3 id="效果预览"><a href="#效果预览" class="header-anchor">#</a> 效果预览</h3> <p><img src="/heima2020/assets/img/image-20200228202751226.e6315276.png" alt="image-20200228202751226"></p> <h3 id="业务逻辑"><a href="#业务逻辑" class="header-anchor">#</a> 业务逻辑</h3> <ol><li>根据redux中的地址进行定位
<ol><li>百度地图要显示在当前的地址</li></ol></li> <li>获取当前地址的所在房源数据</li> <li>根据房源数据描绘出<code>覆盖物</code></li> <li>点击<code>覆盖物</code>加载深一层房源数据</li> <li>点击 <code>最后一层覆盖物</code> 显示详细房源数据</li> <li>拖动地图时，隐藏房源详情数据</li> <li>点击 房源数据时，跳转到房源详情页面</li></ol> <h3 id="接口地址"><a href="#接口地址" class="header-anchor">#</a> 接口地址</h3> <ol><li><p>获取城市的id</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>area<span class="token operator">/</span>info<span class="token operator">?</span>name<span class="token operator">=</span>广州
</code></pre></div></li> <li><p>根据城市的id获取房源信息</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>area<span class="token operator">/</span>map<span class="token operator">?</span>id<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">%</span><span class="token number">7</span>C88cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0
</code></pre></div></li> <li><p>根据 id 查询房屋列表 - 用于列表渲染的</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>houses<span class="token operator">?</span>cityId<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">|</span><span class="token number">5</span>dd4bbdf<span class="token operator">-</span>c936<span class="token operator">-</span><span class="token number">483</span>c
</code></pre></div></li></ol> <h3 id="关键技术"><a href="#关键技术" class="header-anchor">#</a> 关键技术</h3> <ol><li><a href="http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/helloworld" target="_blank" rel="noopener noreferrer">百度地图的定位和缩放地图<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li>百度地图描绘覆盖物
<ol><li><a href="http://lbsyun.baidu.com/jsdemo.htm#c1_14" target="_blank" rel="noopener noreferrer">案例<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b9" target="_blank" rel="noopener noreferrer">类参考<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol></li> <li><a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a3b9" target="_blank" rel="noopener noreferrer">覆盖物的点击事件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0" target="_blank" rel="noopener noreferrer">消除页面所有覆盖物<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li> <li><a href="http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html#a0b0" target="_blank" rel="noopener noreferrer">移动地图<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ol> <h2 id="列表找房页"><a href="#列表找房页" class="header-anchor">#</a> 列表找房页</h2> <h3 id="效果预览-2"><a href="#效果预览-2" class="header-anchor">#</a> 效果预览</h3> <p><img src="/heima2020/assets/img/image-20200301190010083.62ce20d7.png" alt="image-20200301190010083"></p> <h3 id="业务逻辑-2"><a href="#业务逻辑-2" class="header-anchor">#</a> 业务逻辑</h3> <ol><li>使用 <code>navbar</code>组件结合 之前封装的 <code>城市输入框</code>组件实现顶部功能</li> <li>发送请求获取 <code>筛选条件</code> 数据</li> <li>分析 <code>筛选数据</code> 和 页面组件的关系 ！ <strong>重要哦</strong></li> <li>使用 <code>ant-design-mobile</code> 的 <a href="https://mobile.ant.design/components/picker-view-cn/" target="_blank" rel="noopener noreferrer">picker-view<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 组件 结合 <code>筛选条件</code>数据实现 条件筛选功能</li> <li>根据筛选条件 发送请求 获取对应的房源列表数据</li> <li>结合 <code>react-virtualized</code> 组件实现数据显示和分页加载功能</li></ol> <h3 id="接口"><a href="#接口" class="header-anchor">#</a> 接口</h3> <ol><li><p>获取城市的id</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>area<span class="token operator">/</span>info<span class="token operator">?</span>name<span class="token operator">=</span>广州
</code></pre></div></li> <li><p>获取当前城市下的房源筛选数据（如北京）</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>houses<span class="token operator">/</span>condition<span class="token operator">?</span>id<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">|</span><span class="token number">88</span>cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0
</code></pre></div></li> <li><p>根据条件获取房源数据</p> <div class="language-js extra-class"><pre class="language-js"><code>http<span class="token operator">:</span><span class="token operator">/</span><span class="token operator">/</span><span class="token number">157.122</span><span class="token number">.54</span><span class="token number">.189</span><span class="token operator">:</span><span class="token number">9060</span><span class="token operator">/</span>houses<span class="token operator">?</span>cityId<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">|</span><span class="token number">88</span>cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0<span class="token operator">&amp;</span>area<span class="token operator">=</span><span class="token constant">AREA</span><span class="token operator">|</span><span class="token number">88</span>cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0<span class="token operator">&amp;</span>rentType<span class="token operator">=</span><span class="token boolean">true</span><span class="token operator">&amp;</span>price<span class="token operator">=</span><span class="token keyword">null</span><span class="token operator">&amp;</span>more<span class="token operator">=</span><span class="token constant">CHAR</span><span class="token operator">|</span><span class="token number">76</span>eb0532<span class="token operator">-</span><span class="token number">8099</span><span class="token operator">-</span>d1f4<span class="token punctuation">,</span><span class="token constant">FLOOR</span><span class="token operator">|</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token constant">AREA</span><span class="token operator">|</span><span class="token number">88</span>cff55c<span class="token operator">-</span>aaa4<span class="token operator">-</span>e2e0<span class="token punctuation">,</span><span class="token constant">ORIEN</span><span class="token operator">|</span><span class="token number">61e99445</span><span class="token operator">-</span>e95e<span class="token operator">-</span><span class="token number">7</span>f37<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token operator">&amp;</span>roomType<span class="token operator">=</span><span class="token constant">ROOM</span><span class="token operator">|</span>d1a00384<span class="token operator">-</span><span class="token number">5801</span><span class="token operator">-</span>d5cd<span class="token operator">&amp;</span>oriented<span class="token operator">=</span><span class="token constant">ORIEN</span><span class="token operator">|</span><span class="token number">61e99445</span><span class="token operator">-</span>e95e<span class="token operator">-</span><span class="token number">7</span>f37<span class="token operator">&amp;</span>characteristic<span class="token operator">=</span><span class="token constant">CHAR</span><span class="token operator">|</span><span class="token number">76</span>eb0532<span class="token operator">-</span><span class="token number">8099</span><span class="token operator">-</span>d1f4<span class="token operator">&amp;</span>floor<span class="token operator">=</span><span class="token constant">FLOOR</span><span class="token operator">|</span><span class="token number">1</span><span class="token operator">&amp;</span>start<span class="token operator">=</span><span class="token number">1</span><span class="token operator">&amp;</span>end<span class="token operator">=</span><span class="token number">20</span>
</code></pre></div></li></ol> <h2 id="定位层级"><a href="#定位层级" class="header-anchor">#</a> 定位层级</h2> <h3 id="常见问题"><a href="#常见问题" class="header-anchor">#</a> 常见问题</h3> <p>如果工作的时候设计到一些动画效果，往往离不开定位属性的时候。</p> <p>由于页面有多个定位元素，很容易就造成定位层级错乱的问题。</p> <h3 id="注意事项"><a href="#注意事项" class="header-anchor">#</a> 注意事项</h3> <p><code>z-index</code> 可以调整层级，但是有个前提，该元素必须是定位元素，以下三种定位都没问题。</p> <div class="language- extra-class"><pre class="language-text"><code>postion:absolute;
postion:fixed;
postion:relative;
</code></pre></div><h2 id="下拉框-和-picker"><a href="#下拉框-和-picker" class="header-anchor">#</a> 下拉框 和 Picker</h2> <h3 id="概念"><a href="#概念" class="header-anchor">#</a> 概念</h3> <p>在移动端项目中较少看到表单下拉框，因为很多时候下拉框被 Picker 和 PickerView 取代了。</p> <p>二者区别：</p> <ul><li>PickerView 直接渲染在区域中。</li> <li>Picker          底部弹出窗口。</li></ul> <h3 id="pickerview"><a href="#pickerview" class="header-anchor">#</a> PickerView</h3> <h4 id="效果预览-3"><a href="#效果预览-3" class="header-anchor">#</a> 效果预览</h4> <p><img src="/heima2020/assets/img/1591953268724.617c205b.png" alt="1591953268724"></p> <h4 id="注意事项-2"><a href="#注意事项-2" class="header-anchor">#</a> 注意事项</h4> <p>PickerView 选择器组件： https://mobile.ant.design/components/picker-view-cn/</p> <p>PickerView 是 antd-mobile 封装的组件，使用的时候一定要按组件的规范来，注意以下三点：</p> <ul><li>数据的格式</li> <li>默认值格式</li> <li>绑定事件获取值</li></ul> <h4 id="基本使用"><a href="#基本使用" class="header-anchor">#</a> 基本使用</h4> <ol><li>单列数据格式
<ul><li>label  用于展示（给用户看的）</li> <li>value 用于获取值（发给后端的）</li></ul></li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 化简结构    [{} , {}]</span>
<span class="token keyword">const</span> season <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    label<span class="token operator">:</span> <span class="token string">'春'</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">'0'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    label<span class="token operator">:</span> <span class="token string">'夏'</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">{</span>
    label<span class="token operator">:</span> <span class="token string">'秋'</span><span class="token punctuation">,</span>
    value<span class="token operator">:</span> <span class="token string">'2'</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>通过 组件的 data 属性进行数据绑定</li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PickerView</span></span> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>season<span class="token punctuation">}</span></span>  <span class="token punctuation">/&gt;</span></span>
</code></pre></div><ol start="3"><li>如果要实现双向绑定（受控组件），需要使用 value 和 onChange 共同配合。
<ul><li>注意 value 值，数组格式数据（官方规定的）。</li> <li>在初始化的时候设置默认值，如果默认值为 null，就默认显示 data 数组第一项的数据。</li></ul></li></ol> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">class</span> <span class="token class-name">AntdmPickerView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
  state <span class="token operator">=</span> <span class="token punctuation">{</span>
    value<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'2'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onChange'</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> value <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">PickerView</span></span>
          <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>season<span class="token punctuation">}</span></span>
          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">}</span></span>
          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span></span>
        <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
    );
  }
}
</span></code></pre></div><h4 id="补充两个属性"><a href="#补充两个属性" class="header-anchor">#</a> 补充两个属性</h4> <ul><li>级联 cascade ，让数据识别 children，并自动关联，一般情况下设置开启级联。</li> <li>列数 cols，默认 3 列。</li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token operator">&lt;</span>PickerView
    <span class="token comment">// data 数据源</span>
    data<span class="token operator">=</span><span class="token punctuation">{</span>season<span class="token punctuation">}</span>
    <span class="token comment">// value 绑定默认值</span>
    value<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>value<span class="token punctuation">}</span>
    <span class="token comment">// onChange 当手指松开的时候触发一次</span>
    onChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span>
    <span class="token comment">// onScrollChange 了解即可，滚动的时候就会触发</span>
    onScrollChange<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onScrollChange<span class="token punctuation">}</span>
    <span class="token comment">// cascade 级联 - 默认值为 true - 自动关联数据源的 children 子项</span>
    cascade<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span>
    <span class="token comment">// cols 列数 - 默认 3 列</span>
    cols<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><h3 id="picker-效果预览"><a href="#picker-效果预览" class="header-anchor">#</a> Picker 效果预览</h3> <p>Picker 选择器组件：https://mobile.ant.design/components/picker-cn/</p> <p><img src="/heima2020/assets/img/1592019851614.e3bc1251.png" alt="1592019851614"></p> <h2 id="筛选数据准备"><a href="#筛选数据准备" class="header-anchor">#</a> 筛选数据准备</h2> <p>获取房屋查询条件接口：</p> <div class="language- extra-class"><pre class="language-text"><code>http://157.122.54.189:9060/houses/condition?id=AREA|88cff55c-aaa4-e2e0
</code></pre></div><p>接口返回的了所有的查询条件数据，需要前端处理一下才能使用，数据量有点多，处理的时候要小心。</p> <h3 id="第一份数据-用于-pickerview"><a href="#第一份数据-用于-pickerview" class="header-anchor">#</a> 第一份数据 - 用于 PickerView</h3> <p><img src="/heima2020/assets/img/1592035381907.d1d1777a.png" alt="1592035381907"></p> <h3 id="第二份数据-用于-pickerview"><a href="#第二份数据-用于-pickerview" class="header-anchor">#</a> 第二份数据 - 用于 PickerView</h3> <p><img src="/heima2020/assets/img/1592035385597.7222295e.png" alt="1592035385597"></p> <h3 id="第三份数据-用于-pickerview"><a href="#第三份数据-用于-pickerview" class="header-anchor">#</a> 第三份数据 - 用于 PickerView</h3> <p><img src="/heima2020/assets/img/1592035403041.2f384b72.png" alt="1592035403041"></p> <h3 id="第四份数据-普通列表渲染"><a href="#第四份数据-普通列表渲染" class="header-anchor">#</a> 第四份数据 - 普通列表渲染</h3> <p><img src="/heima2020/assets/img/1592035458148.a2042663.png" alt="1592035458148"></p> <h2 id="padding-和-margin-补充"><a href="#padding-和-margin-补充" class="header-anchor">#</a> padding 和 margin 补充</h2> <p>padding 和 margin 如果设置的是百分比值，其实是相对于当前元素的父元素水平方向宽度的百分比。</p> <h3 id="参考代码-4"><a href="#参考代码-4" class="header-anchor">#</a> 参考代码</h3> <p>右间距和下间距都是水平的百分之 3% 。</p> <div class="language- extra-class"><pre class="language-text"><code>margin:0 3% 3% 0;
</code></pre></div><h2 id="根据条件获取房源数据"><a href="#根据条件获取房源数据" class="header-anchor">#</a> 根据条件获取房源数据</h2> <h3 id="获取房源数据-api"><a href="#获取房源数据-api" class="header-anchor">#</a> 获取房源数据 API</h3> <p>该 API 参数比较复杂，参数主要通过 PickerView 组件选择 和 弹出层点击选择 获取。</p> <div class="language- extra-class"><pre class="language-text"><code>http://157.122.54.189:9060/houses
</code></pre></div><h3 id="参数图解"><a href="#参数图解" class="header-anchor">#</a> 参数图解</h3> <p><img src="/heima2020/assets/img/1592104299273.3c080d87.png" alt="1592104299273"></p> <h3 id="参数格式参考"><a href="#参数格式参考" class="header-anchor">#</a> 参数格式参考</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code>selectParams <span class="token operator">=</span> <span class="token punctuation">{</span>
    area 或 subway<span class="token operator">:</span> xxx
    rentType<span class="token operator">:</span> xxx
    price<span class="token operator">:</span> xxx
    more<span class="token operator">:</span> xxx
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="删除无用参数"><a href="#删除无用参数" class="header-anchor">#</a> 删除无用参数</h3> <h4 id="核心代码"><a href="#核心代码" class="header-anchor">#</a> 核心代码</h4> <p>通过遍历对象，删除对象中值为 undefined， null ，空字符串三种情况的无用参数。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 遍历参数对象</span>
Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>selectParams<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token keyword">undefined</span><span class="token punctuation">,</span> <span class="token string">'null'</span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>selectParams<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    	<span class="token keyword">delete</span> selectParams<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="删除前"><a href="#删除前" class="header-anchor">#</a> 删除前</h4> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token punctuation">{</span>
    more<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
    rentType<span class="token operator">:</span> <span class="token string">'null'</span><span class="token punctuation">,</span>
    price<span class="token operator">:</span> <span class="token string">&quot;PRICE|1000&quot;</span><span class="token punctuation">,</span>
    <span class="token keyword">undefined</span><span class="token operator">:</span> <span class="token keyword">undefined</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="删除后"><a href="#删除后" class="header-anchor">#</a> 删除后</h4> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token punctuation">{</span>
    price<span class="token operator">:</span> <span class="token string">&quot;PRICE|1000&quot;</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="虚拟列表-长列表"><a href="#虚拟列表-长列表" class="header-anchor">#</a> 虚拟列表(长列表)</h2> <p>虚拟列表插件：https://github.com/bvaughn/react-virtualized</p> <p>List 组件手册：https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md</p> <h3 id="导入组件"><a href="#导入组件" class="header-anchor">#</a> 导入组件</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> List <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-virtualized'</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="list-组件五个必要属性"><a href="#list-组件五个必要属性" class="header-anchor">#</a> List 组件五个必要属性</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token operator">&lt;</span>List
    <span class="token comment">// 宽度 - Number</span>
    width<span class="token operator">=</span><span class="token punctuation">{</span>window<span class="token punctuation">.</span>screen<span class="token punctuation">.</span>width<span class="token punctuation">}</span>
    <span class="token comment">// 高度 - Number</span>
    height<span class="token operator">=</span><span class="token punctuation">{</span>window<span class="token punctuation">.</span>screen<span class="token punctuation">.</span>height<span class="token punctuation">}</span>
    <span class="token comment">// 行数 - Number</span>
    rowCount<span class="token operator">=</span><span class="token punctuation">{</span>list<span class="token punctuation">.</span>length<span class="token punctuation">}</span>
    <span class="token comment">// 行高度  - Number / Function </span>
    rowHeight<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>rowHeight<span class="token punctuation">}</span>
    <span class="token comment">// 行渲染 - Function - 负责呈现一行</span>
    rowRenderer<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>rowRenderer<span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
</code></pre></div><h2 id="移动端分页"><a href="#移动端分页" class="header-anchor">#</a> 移动端分页</h2> <h3 id="滚动事件-滚动触底"><a href="#滚动事件-滚动触底" class="header-anchor">#</a> 滚动事件 - 滚动触底</h3> <ul><li>长列表List 组件的 onScroll 滚动事件三个参数
<ul><li>scrollHeight    长列表内容总高</li> <li>clientHeight    可视区高</li> <li>scrollTop         滚动出去了多少</li></ul></li> <li>判断是否滚动触底公式：大的高度 - 两个小高度  &lt;=  某个数
<ul><li>某个数为 0 的时候，才是真正的触底，但是一般准备到的时候(其实还没到)，就要去加载数据了。</li></ul></li></ul> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 滚动事件</span>
<span class="token function-variable function">onScroll</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> scrollHeight<span class="token punctuation">,</span> clientHeight<span class="token punctuation">,</span> scrollTop <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// 是否滚动即将触底</span>
  <span class="token keyword">const</span> isReachBottom <span class="token operator">=</span> scrollHeight <span class="token operator">-</span> clientHeight <span class="token operator">-</span> scrollTop <span class="token operator">&lt;=</span> <span class="token number">60</span><span class="token punctuation">;</span>
  <span class="token comment">// 触底后加载分页数据</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="滚动触底图示分析"><a href="#滚动触底图示分析" class="header-anchor">#</a> 滚动触底图示分析</h4> <p><img src="/heima2020/assets/img/1592129419416.846f1cde.png" alt="1592129419416"></p> <h3 id="常见两种后端分页接口"><a href="#常见两种后端分页接口" class="header-anchor">#</a> 常见两种后端分页接口</h3> <ul><li><p>第一种：页码</p></li> <li><p>第二种：开始项 和 结束项</p></li></ul> <p><img src="/heima2020/assets/img/1592129262263.33d8e4d2.png" alt="1592129262263"></p> <h2 id="redux-浏览器插件使用"><a href="#redux-浏览器插件使用" class="header-anchor">#</a> redux 浏览器插件使用</h2> <h3 id="浏览器安装插件"><a href="#浏览器安装插件" class="header-anchor">#</a> 浏览器安装插件</h3> <p>安装浏览器插件 <code>Redux DevTools</code> 。</p> <p><img src="/heima2020/assets/img/1592272174251.7372d251.png" alt="1592272174251"></p> <h3 id="浏览器无法使用插件的提示"><a href="#浏览器无法使用插件的提示" class="header-anchor">#</a> 浏览器无法使用插件的提示</h3> <ul><li>该插件需要在源代码中添加配置，浏览器才能看到仓库的数据，请看下一步。</li></ul> <p><img src="/heima2020/assets/img/1592282036443.0ee82413.png" alt="1592282036443"></p> <h3 id="源代码添加配置"><a href="#源代码添加配置" class="header-anchor">#</a> 源代码添加配置</h3> <p><code>src\store\index.js</code></p> <p>在创建仓库的时候添加启动插件的配置（初级设置）。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token comment">// 创建仓库并传入管理员</span>
<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>
  reducer<span class="token punctuation">,</span>
  window<span class="token punctuation">.</span>__REDUX_DEVTOOLS_EXTENSION__ <span class="token operator">&amp;&amp;</span> window<span class="token punctuation">.</span><span class="token function">__REDUX_DEVTOOLS_EXTENSION__</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="浏览器查看-redux-仓库数据"><a href="#浏览器查看-redux-仓库数据" class="header-anchor">#</a> 浏览器查看 redux 仓库数据</h3> <p><img src="/heima2020/assets/img/1592282254609.8381de78.png" alt="1592282254609"></p> <h2 id="处理异步-action"><a href="#处理异步-action" class="header-anchor">#</a> 处理异步 Action</h2> <p>需要安装额外的中间件件支持  <code>redux-thunk</code> 。</p> <p>官方手册：https://github.com/reduxjs/redux-thunk</p> <h3 id="安装中间件"><a href="#安装中间件" class="header-anchor">#</a> 安装中间件</h3> <div class="language- extra-class"><pre class="language-text"><code>yarn add redux-thunk
</code></pre></div><h3 id="初级用法"><a href="#初级用法" class="header-anchor">#</a> 初级用法</h3> <p><code>src\store\index.js</code> 初级版，无法使用 <code>redux-devtools</code>。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createStore<span class="token punctuation">,</span> applyMiddleware <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> thunk <span class="token keyword">from</span> <span class="token string">'redux-thunk'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>
  reducer<span class="token punctuation">,</span>
  <span class="token function">applyMiddleware</span><span class="token punctuation">(</span>thunk<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span>
</code></pre></div><h3 id="高级用法"><a href="#高级用法" class="header-anchor">#</a> 高级用法</h3> <p><code>src\store\index.js</code> 高级版，<code>redux-thunk</code> 和 <code>redux-devtools</code> 共同使用。</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> createStore<span class="token punctuation">,</span> applyMiddleware<span class="token punctuation">,</span> compose <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;redux&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> thunk <span class="token keyword">from</span> <span class="token string">'redux-thunk'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> composeEnhancers <span class="token operator">=</span> window<span class="token punctuation">.</span>__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ <span class="token operator">||</span> compose<span class="token punctuation">;</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token function">createStore</span><span class="token punctuation">(</span>
  reducer<span class="token punctuation">,</span>
  <span class="token function">composeEnhancers</span><span class="token punctuation">(</span>
    <span class="token function">applyMiddleware</span><span class="token punctuation">(</span>thunk<span class="token punctuation">)</span>
  <span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span>
</code></pre></div><h2 id="更安全的-props"><a href="#更安全的-props" class="header-anchor">#</a> 更安全的 props</h2> <p>在 React 项目中会经常使用到组件 props 属性。如：</p> <p>路由： this.props.history.push()</p> <p>redux仓库:  this.props.stateXX</p> <p>...</p> <h3 id="prop-types-数据类型校验"><a href="#prop-types-数据类型校验" class="header-anchor">#</a> prop-types 数据类型校验</h3> <p>npm 官方文档：https://www.npmjs.com/package/prop-types</p> <p>翻译过的文档参考：https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html</p> <h3 id="defaultprops-默认值"><a href="#defaultprops-默认值" class="header-anchor">#</a> defaultProps 默认值</h3> <p>用于设置 props 默认值。</p> <h3 id="props-参考代码"><a href="#props-参考代码" class="header-anchor">#</a> props 参考代码</h3> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> propTypes <span class="token keyword">from</span> <span class="token string">&quot;prop-types&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">ReactPropTypes</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>

  <span class="token comment">// static 是 ES2016 新增的类的静态属性</span>

  <span class="token comment">// props 类型校验</span>
  <span class="token keyword">static</span> propTypes <span class="token operator">=</span> <span class="token punctuation">{</span>
    ml<span class="token operator">:</span> propTypes<span class="token punctuation">.</span>number
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token comment">// props 默认值设置</span>
  <span class="token keyword">static</span> defaultProps <span class="token operator">=</span> <span class="token punctuation">{</span>
    activeIndex<span class="token operator">:</span> <span class="token number">0</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">props组件类型校验</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          </span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>msg<span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
          你打针的总毫升数是：</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>ml <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">}</span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">你当前选中的索引值为:</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>activeIndex<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> ReactPropTypes<span class="token punctuation">;</span>
</code></pre></div><h2 id="react-create-app-脚手架"><a href="#react-create-app-脚手架" class="header-anchor">#</a> React-Create-App 脚手架</h2> <p>不管是 Vue 还是 React 的脚手架，都是通过 webPack 实现的编译和打包。</p> <p>React 脚手架学会用了，其实大家可以自己看会 Vue 的脚手架自己根据文档学习配置。</p> <h3 id="使用全局变量"><a href="#使用全局变量" class="header-anchor">#</a> 使用全局变量</h3> <p>https://create-react-app.dev/docs/using-global-variables/</p> <div class="language-jsx extra-class"><pre class="language-jsx"><code><span class="token keyword">const</span> BMap <span class="token operator">=</span> window<span class="token punctuation">.</span>BMap<span class="token punctuation">;</span>
</code></pre></div><h3 id="使用绝对路径导入"><a href="#使用绝对路径导入" class="header-anchor">#</a> 使用绝对路径导入</h3> <p>https://create-react-app.dev/docs/importing-a-component/#absolute-imports</p> <ol><li>根目录下新建文件 <code>jsconfig.json</code></li></ol> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;compilerOptions&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;baseUrl&quot;</span><span class="token operator">:</span> <span class="token string">&quot;src&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;include&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;src&quot;</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>之前的导入 src 文件夹下其他的文件，就可以化简：</li></ol> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 相对路径的写法：</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../../utils/request'</span><span class="token punctuation">;</span>

<span class="token comment">// 绝对路径的写法：</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> request <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'utils/request'</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>由于修改了 webpack 的配置，所以需要重启脚手架</li></ol> <div class="language- extra-class"><pre class="language-text"><code>yarn start
</code></pre></div><h3 id="服务器代理"><a href="#服务器代理" class="header-anchor">#</a> 服务器代理</h3> <p>React-create-app 配置：https://create-react-app.dev/docs/proxying-api-requests-in-development</p> <p>VueCli配置：https://cli.vuejs.org/zh/config/#devserver-proxy</p> <p>面试官：如果你开发的时候，请求后台接口跨域了，请问你怎么办？</p> <h4 id="跨域"><a href="#跨域" class="header-anchor">#</a> 跨域</h4> <ul><li>协议不一样</li> <li>域名不一样</li> <li>端口不一样</li></ul> <p>协议，域名，端口有其中之一不同，浏览器都会视为跨域。</p> <h4 id="常见解决方案"><a href="#常见解决方案" class="header-anchor">#</a> 常见解决方案</h4> <ol><li>大家都在同一个域下开发 - 前端代码和后端代码放到同一个服务器中。</li> <li>CORS 跨源资源共享 - 找后端哥哥做这个工作。</li> <li>靠自己 - 自己用 webpack 弄服务器代理，react 和 vue 的脚手架都可以配置。</li></ol> <h4 id="代理步骤"><a href="#代理步骤" class="header-anchor">#</a> 代理步骤</h4> <p>主要用于 解决开发时 跨域问题。</p> <ol><li><p>安装</p> <div class="language-js extra-class"><pre class="language-js"><code>yarn add http<span class="token operator">-</span>proxy<span class="token operator">-</span>middleware
</code></pre></div></li> <li><p>新建配置文件</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> createProxyMiddleware <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'http-proxy-middleware'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">app</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  app<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>
    <span class="token string">'/api'</span><span class="token punctuation">,</span>
    <span class="token function">createProxyMiddleware</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      target<span class="token operator">:</span> <span class="token string">'http://localhost:8080'</span><span class="token punctuation">,</span>
      changeOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>修改了配置，重启脚手架</p> <div class="language- extra-class"><pre class="language-text"><code>yarn start
</code></pre></div></li> <li><p>发送请求</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">&quot;axios&quot;</span><span class="token punctuation">;</span>
axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/api'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/heima2020/assets/js/app.e2adc9d2.js" defer></script><script src="/heima2020/assets/js/2.7389c9d3.js" defer></script><script src="/heima2020/assets/js/4.586af112.js" defer></script>
  </body>
</html>
